<script setup lang="ts">
import {ref} from 'vue'
import {NLayoutSider} from 'naive-ui'
import {StWatchWidth} from 'st-common-ui-vue3'
import {StnResponsiveSiderProps} from './type.ts'

/**
 * 组件配置选项
 */
defineOptions({
  name: 'StnResponsiveSider',
})

/**
 * 组件参数
 */
const {
  contentClass = '',
  bordered = true,
  showTrigger = 'bar',
  collapseMode = 'width',
  width = 240,
  collapsedWidth = 64,
  collapsedResponsiveWinWidth = 768,
  siderProps = {},
} = defineProps<StnResponsiveSiderProps>()

// 侧边栏是否折叠
const isCollapsed = ref(false)

/**
 * 宽度变化处理函数
 * @param {number} width
 */
const widthChangeHandler = (width: number) => {
  isCollapsed.value = width <= collapsedResponsiveWinWidth
}
</script>

<template>

  <n-layout-sider
    class="stn-sider"
    v-bind="{
      ...siderProps,
      contentClass,
      bordered,
      showTrigger,
      collapseMode,
      width,
      collapsedWidth,
      collapsed: isCollapsed,
      'on-update:collapsed': (collapsed: boolean) => isCollapsed = collapsed,
    }"
  >
    <StWatchWidth
      strategy="screen"
      :width-change-handler="widthChangeHandler"
    >
      <slot
        :isCollapsed="isCollapsed"
        :width="width"
        :collapsedWidth="collapsedWidth"
      ></slot>
    </StWatchWidth>
  </n-layout-sider>
</template>

<style scoped lang="scss">
.stn-sider {
  width: 100%;
}
</style>
